@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	scroll-behavior: smooth;
	main{
		// margin-top: 4vw;
		perspective: 3px;
		
		
		.bg{
			background-size: cover;
			// width: 100vw;
			width: 100%;
			height: 100%;
			z-index: -2;
			background-attachment: fixed;
			// background-image: url("../images/2.jpg");
			position: absolute;
		}	
		.top{
			width: 77vw;
			margin: 0 auto;
			background-image: url(../images/productDetailtop.png);
			background-repeat: no-repeat;
			background-size: cover;
			padding-top: 16vw;
			padding-bottom: 16vw;
			h2{
				text-align: center;
				font-size: 4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 5vw;
				letter-spacing: 0vw;
				color: white;
			}
			h3{
				text-align: center;
				font-size: 4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 5vw;
				letter-spacing: 0vw;
				color: white;
			}
		}
		
		.center{
			width: 77vw;
			margin: 0 auto;
			.detail{
				.detailTop{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-top: 6vw;
					.left{
						width: 46vw;
						height: 29vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					.right{
						width: 24vw;
						height: 29vw;
						h2{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0vw;
							color: #000000;
							padding-bottom: 3vw;
						}
						p{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 2vw;
							letter-spacing: 0vw;
							color: #000000;
							padding-bottom: 2vw;
							text-align: justify;
						}
					}
				}
				.detailCenter{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-top: 6vw;
					.left{
						width: 27vw;
						height: 34vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					.right{
						width: 44vw;
						height: 34vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
				}
				.detailBottom{
					width: 73vw;
					display: flex;
					justify-content: space-between;
					padding-top: 6vw;
					align-items: flex-end;
					.left{
						width: 46vw;
						height: 29vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					.right{
						width: 22vw;
						.imgBox{
							width: 22vw;
							height: 9vw;
							overflow: hidden;
							img{
								width: 100%;
							}
						}
						p{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0vw;
							color: #000000;
							// text-align: justify;
						}
					}	
				}
			}
			.scene{
				padding-top: 8vw;
				.title{
					text-align: center;
					padding-bottom: 5vw;
					span{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				.swiper{
					position: relative;
					width: 77vw;
					height: 16vw;
					// overflow: hidden;
					z-index: 1;
					// 分页器当前图片按钮颜色				
					--swiper-pagination-color: red;
					 
					.swiper-wrapper{
						display: flex;
						justify-content: space-between;
						.swiper-slide{	
							width: 24vw;
							height: 16vw;
							overflow: hidden;						
							img{
								width: 100%;
								height: 100%;
							}	
						}
					}
					
					.swiper-pagination{
						bottom: 1vw;
					}
					
					.swiper-button-prev:after {
					    content: 'prev';
					    color: #ffffff;
						// visibility: hidden;
					}
					
					.swiper-button-next:after {
					    content: 'next';
					    color: #ffffff;
						// visibility: hidden;
					}
				}
				
			}
		}
		
		.bottom{
			margin: 0 auto;
			width: 100%;
			height: 50vw;
			margin-top: 8vw;
			background-image: url(../images/productbg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
}


@media screen and (max-width:767px) {
	.web{
		main{
			padding-top: 1vw;			
			
			.top{
				width: 90vw;			
				h2{
					
					font-size: 4vw;					
					line-height: 5vw;
					
					
				}
				h3{
					padding-top: 2vw;
					
					font-size: 4vw;
					
					line-height: 5vw;
					
				}
				
			}
			
			
			.center{
				width: 77vw;
				margin: 0 auto;
				.detail{
					.detailTop{
						width: 100%;
						display: block;
						justify-content: space-between;
						padding-top: 6vw;
						.left{
							width: 50vw;
							height: 29vw;
							overflow: hidden;
							margin: 0 auto;
							img{
								width: 100%;
							}
						}
						.right{
							width: 100%;
							
							h2{							
								padding-top: 3vw;
								line-height: 4vw;
							}
							p{							
								line-height: 4vw;
							}
						}
					}
					.detailCenter{						
						padding-top: 15vw;
						
					}
					
				}
				.scene{
					
					.swiper{
						
						
					    .swiper-button-prev:after {
						    content: 'prev';
						    font-size: 6vw;
						}
						
						.swiper-button-next:after {
						    content: 'next';
						    font-size: 6vw;
						}
					}
					
				}
			}												
		}
	}
}